import React from "react";
import styled from "styled-components";
import { hiDPI } from "polished";
import IconButton from "@material-ui/core/IconButton";
import { ArrowBack } from "styled-icons/material";

const StyledHeader = styled.header`
  ${hiDPI(1)} {
    height: 64px;
  }
  ${hiDPI(2)} {
    height: 56px;
  }
  background-color: #2aac5e;
`;

const Nav = styled.nav`
  position: relative;
  display: grid;
  grid-template-columns: 50px auto 50px;
  align-items: center;
  justify-items: center;
  height: 100%;
  ${hiDPI(1)} {
    padding: 0 24px;
  }
  ${hiDPI(2)} {
    padding: 0 16px;
  }
  * {
    color: white;
  }
`;

const BackButton = styled(ArrowBack)`
  height: 35px;
`;

const Tittle = styled.h2`
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0.02em;
`;

class Header extends React.Component {
  render() {
    return (
      <StyledHeader className="header">
        <Nav>
          <IconButton>
            <BackButton />
          </IconButton>
          <Tittle>豆瓣电影</Tittle>
        </Nav>
      </StyledHeader>
    );
  }
}

export default Header;
